<template>
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>主贴-回帖</title>
    <link rel="stylesheet" href="../assets/ciyuan_css/luntan_css/naviddation bar.css">
    <link rel="stylesheet" href="../assets/ciyuan_css/luntan_css/common.css">
    <link rel="stylesheet" href="../assets/ciyuan_css/luntan_css/detail.css">
  </head>
  <body>

  <div class="daohanlan">
    <div class="left-logo">
      <div class="logo"><img src="../assets/ciyuan_image/luntan_img/xitontubiao.png" width="45"></div>
      <p>论坛管理信息系统</p>
    </div>
    <!DOCTYPE html>
    <html>
    <head>
      <title>搜索框</title>
      <style>
        .search-box {
          display: inline-block;
          position: absolute;
          top: 10px;
          right: 600px;
          width: 400px;
        }

        .search-box input[type="text"] {
          width: 100%;
          padding: 10px;
          border: none;
          border-radius: 20px;
          background-color: #f2f2f2;
          box-shadow: none;
          transition: box-shadow 0.3s ease;
        }

        .search-box input[type="text"]:focus {
          box-shadow: 0 0 5px #007bff;
        }

        .search-box button {
          position: absolute;
          top: 0;
          right: 0;
          padding: 10px 20px;
          border: none;
          background-color: #007bff;
          color: #fff;
          border-radius: 20px;
          cursor: pointer;
          transition: background-color 0.3s ease;
        }

        .search-box button:hover {
          background-color: #0056b3;
        }
      </style>
      <script>
        function search() {
          var input = document.getElementById("search-input");
          var keyword = input.value;
          // 在这里添加搜索功能的代码
          // ...
          alert("搜索关键字：" + keyword);
        }
      </script>
    </head>
    <body>
    <div class="search-box">
      <input type="text" id="search-input" placeholder="请输入关键字">
      <button onclick="search()">搜索</button>
    </div>
    </body>
    </html>


    <div class="zhanwe"></div>

    <div class="right-function">
      <!DOCTYPE html>
      <html>
      <head>
        <title>写帖子</title>
        <style>
          .button {
            display: inline-block;
            background-color: #0055ff;
            color: #0aee47;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 12px;
            text-decoration: none;
            transition: background-color 0.3s ease;
          }

          .button:hover {
            background-color: #0056b3;
          }
        </style>
      </head>
      <body>
      <router-link to="luntanmaid" class="button">主页</router-link>
      </body>
      </html>
      <!DOCTYPE html>
      <html>
      <head>
        <title>写帖子</title>
        <style>
          .button {
            display: inline-block;
            background-color: #0055ff;
            color: #0aee47;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 12px;
            text-decoration: none;
            transition: background-color 0.3s ease;
          }

          .button:hover {
            background-color: #0056b3;
          }
        </style>
      </head>
      <body>
      <router-link to="/luntanpublish" class="button">写帖子</router-link>
      </body>
      </html>
    </div>
  </div>

  <div class="zhuti">
    <div class="gerzonxin">
      <div class="toxian">
        <img src="../assets/ciyuan_image/luntan_img/toxian.png" alt="" width="120">
      </div>
      <p>次元蜗</p>
      <div>男</div>
      <div></div>

      <div class="denjixinxi">
        <div>
          <div>积分</div>
          <div>10</div>
        </div>
        <div>
          <div>等级</div>
          <div>1</div>
        </div>
      </div>

    </div>

    <div class="bankuailiebiao">
      <ol>
        <li>
          <div class="bankuaixinxi">
            <h3 class="bankuaiminchen"></h3>
            <p class="zhutiesijian">2022-06-05</p>

            <div class="banzhu">贴主: <span class="banzhuminchen">次元蜗</span></div>
            <p class="bankuaishuomin"> 今天加入次元蜗啦！</p>
            <img src="../assets/ciyuan_image/luntan_img/tupian.png" alt="tupian" width="90">

            <div class="dianji">
              <div class="shulian">
                <div>点击次数</div>
                <div>100</div>
              </div>
              <div>
                <div>回复次数</div>
                <div>3</div>
              </div>
            </div>

          </div>
        </li>
        <li>
          <div class="bankuaixinxi">
            <h3 class="bankuaiminchen">回帖</h3>
            <p class="zhutiesijian">2023-04-05</p>

            <div class="banzhu">回帖: <span class="banzhuminchen">次元蜗</span></div>
            <p class="bankuaishuomin"> 真心推荐这个网站</p>

            <div class="dinaji">
              <div class="shulian">
                <div></div>
                <div></div>
              </div>
            </div>

          </div>
        </li>
        <li>
          <div class="bankuaixinxi">
            <h3 class="bankuaiminchen">回帖</h3>
            <p class="zhutiesijian">2023-03-01</p>

            <div class="banzhu">回帖: <span class="banzhuminchen">次元蜗</span></div>
            <p class="bankuaishuomin">体验了这么久挺好用的</p>

            <div class="dianji">
              <div class="shulian">
                <div></div>
                <div></div>
              </div>
            </div>

          </div>
        </li>
        <li>
          <div class="bankuaixinxi">
            <h3 class="bankuaiminchen">回帖</h3>
            <p class="zhutiesijian">2022-06-05</p>

            <div class="banzhu">回帖: <span class="banzhuminchen">次元蜗</span></div>
            <p class="bankuaishuomin">纪念我的第一次发帖</p>

            <div class="dianji">
              <div class="shulian">
                <div></div>
                <div></div>
              </div>
            </div>

          </div>

        </li>

      </ol>
      <p></p>
      <div>
        回帖
        <input type="text" placeholder="在这里写回帖" id="title">
        <button id="submit">发布回帖</button>
      </div>

    </div>
  </div>

  </body>
  </html>
</template>

<script>
export default {
  name:'luntanReplies',
}
</script>